<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
<head>
	<title>Ext.ux.ColorPicker</title>
	<link rel="stylesheet" href="../../resources/css/ext-all.css" type="text/css" />
	<link rel="stylesheet" href="../../resources/css/color-picker.ux.css" type="text/css" />
	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../../ext-all.js"></script>
	<script type="text/javascript" src="../../ux/color-picker/color-picker.ux.js"></script>
	<script type="text/javascript">
		function testPickColor( p, hexa ) {
			Ext.get( 'result' ).update( '&nbsp;'+hexa+'&nbsp;' );
			Ext.get( 'result' ).setStyle({ backgroundColor: '#'+hexa });
		}
		Ext.onReady( function(){
			var picker = new Ext.ux.ColorPicker( 'colorPicker', {
				hidePanel: false,
				captions: {
					red: 'red',
					green: 'grn',
					blue: 'blue',
					hue: 'hue',
					saturation: 'sat',
					brightness: 'val',
					hexa: 'col.'
				},
				animate: true
			});
			picker.on( 'pickcolor', testPickColor );

			pickerDialog = new Ext.ux.ColorDialog( 'colorDialog', {
				title: 'Pick a Color!',
				resizable: false,
				hidepanel: false,
				hsv: {h:120, s:20, v:50},
				width: 285,
				height: 262,
			    shadow: true
			});
			pickerDialog.on( 'pickcolor', testPickColor );
			pickerDialog.addButton( 'Ok' );
			pickerDialog.addButton( 'Cancel' );
		});
		function showDialog( element ) { pickerDialog.show( element );}
	</script>
</head>
<body style="font-family:Verdana;font-size:12px;">
	<h1 style="margin: 2px 0 5px 10px;font-size:16px;">Ext.ux.ColorPicker and Ext.ux.ColorDialog for ExtJS</h1>
	<div style="float: left;margin:10px;">
		<div style="float: left;width: 600px;background:#EEEEEE;padding: 10px;">
			<h3>Version</h3>
			<ul style="margin: 0 0 2px 30px;list-style-type:square;">
				<li>0.9 stable<ul style="margin: 0 0 2px 30px;list-style-type:disc;">
					<li>multiple inherited classes, picker and dialog in one file</li>
					<li>refactored css file</li>
					<li>Inline reference (documentation)</li>
				</ul></li>
			</ul>
			<hr />
			<h3>Todo</h3>
			<ul style="margin: 0 0 2px 30px;list-style-type:square;">
				<li>Documentation and webpage for extension in 1.0</li>
				<li>Some small CSS modification for better layout in 1.0</li>
				<li style="list-style-type:none;"><hr style="border:none;border-top: 1px dotted lightgray;" /></li>
				<li>Websafe color (in 1.1)</li>
				<li>Make picker draggable (in 1.1)</li>
			</ul>
			<hr />
			<h3>Key features</h3>
			<ul style="margin: 0 0 2px 30px;list-style-type:square;">
				<li>Pick color</li>
				<li>Input RGB, HSV or Hexa code and display that color</li>
				<li>Inline and BasicDialog support</li>
				<li>Tested in Firefox and IE 6/7</li>
			</ul>
			<hr />
			<h3>Events</h3>
			<ul style="margin: 0 0 2px 30px;list-style-type:square;">
				<li>pickcolor: fires when select a color (the color has been changed). <b>function( this: picker, hexa: color )</b></li>
				<li>changergb: fires when the rgb inputs has been changed. <b>function( this: picker, rgb: { r:0-255, g:0-255, b: 0-255 } )</b></li>
				<li>changehsv: fires when the hsv inputs has been changed. <b>function( this: picker, hsv: { h:0-360, s:0-100, v: 0-100 } )</b></li>
				<li>changehex: fires when the hexa input has been changed. <b>function( this: picker, hexa: color )</b></li>
			</ul>
			<hr />
			<h3>Config</h3>
			<ul style="margin: 0 0 2px 30px;list-style-type:square;">
				<li>@cfg {Boolean} hidePanel true to hide the inputs (defaults to false)</li>
				<li>@cfg {Boolean/Object} animate Moving pickers with this animate or false to no animation (defaults to false)</li>
				<li>@cfg {Object} rgb (optional) Add initial color with rgb format eg.: { r:255, g:128, b:10 }</li>
				<li>@cfg {Object} hsv (optional) Add initial color with hsv format eg.: { h:100, s:60, v:50 }</li>
				<li>@cfg {String} color (optional) Add initial color with hexa format eg.: 'A3CF6D'</li>
				<li>@cfg {Object} pickerHotPoint (optional) If you change the picker image, you can change the point of pick. ( defaults to { x:3, y:3 } )</li>
				<li>@cfg {Object} captions labels of inputs (defaults to { red: 'R', green: 'G', blue: 'B', hue: 'H°', saturation: 'S%', brightness: 'V%', hexa: 'Color' })</li>
			</ul>
		</div>
		<div style="float: left; padding: 10px;">
			<h2>Example</h2>
			<div id="colorPicker" style="padding:5px;margin: 10px; width:250px; border: 2px dotted red; background: #EEEEEE;"></div>
			<div id="colorDialog"></div>
			<p><input type="button" value="Dialog" onclick="showDialog(this)" /></p>
			<p>Selected color: <span id="result">&nbsp;FFFFFF&nbsp;</span></p>
			<hr style="clear:both;visibility:hidden;" />
		</div>
	</div>
</body>
</html>